<template>
  <div class="container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form :model="LoginEntity" :rules="rules">
          <h1>Hello</h1>
          <h3>欢迎来到讯达通</h3>
          <el-form-item prop="username">
            <el-input prefix-icon="user" v-model="LoginEntity.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              prefix-icon="lock"
              :show-password="true"
              v-model="LoginEntity.password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="loginbtn" @click="login" :loading="isloading">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { LoginData } from '@/api/user/type'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import useUserStore from '@/store/modules/user'
import { ref } from 'vue'

const User = useUserStore()
const $router = useRouter()
const LoginEntity = reactive({ username: 'admin', password: '111111' })
let isloading = ref(false)
function login() {
  isloading.value = true
  User.login(LoginEntity as LoginData)
    .then(r => {
      ElNotification({ title: '消息', message: '登录成功', type: 'success' })
      $router.push('home')
      // console.log(r)
    })
    .catch(e => {
      // console.log('errer:' + e)
      ElNotification({ title: '错误', message: e.message, type: 'error' })
    })
    .finally(() => {
      isloading.value = false
    })

  // let res = loginreq(LoginEntity as LoginData)
  // res.then(r => {
  //   if (r.code == '200') {
  //     ElNotification({ title: '消息', message: '登录成功', type: 'success' })
  //     $router.push('layout')
  //     console.log(r.data)
  //     Cookies.set('cookie', r.data)
  //   } else {
  //     ElNotification({ title: '消息', message: '账号或密码错误！', type: 'error' })
  //   }
  // })
}
const rules = reactive({
  username: [{ validator: usenameVaildator, trigger: 'change' }], //自定义校验
  password: [{ required: true, message: '内容不能为空', max: 20, min: 6, trigger: 'blur' }], //普通检验
})
function usenameVaildator(rules: any, value: string, callback: any) {
  if (value.length < 6) callback(new Error('用户名长度不能小于6位！'))
  callback()
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .el-form {
    max-width: 600px;
    min-width: 300px;
    position: relative;
    top: 50vh;
    left: 50px;
    transform: translateY(-50%);
    // bottom: 50%;
    width: 80%;
    padding: 32px 40px;
    background: url('@/assets/images/login_form.png') no-repeat;
    background-size: cover;

    h1 {
      color: white;
      margin: 15px 0px;
      font-size: 45px;
    }

    h3 {
      color: white;
      margin: 30px 0px;
      font-size: 30px;
    }

    .loginbtn {
      width: 100%;
      height: 40px;
      margin-top: 20px;
    }
  }
}
</style>
